<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>淘抢购</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="container">
    <nav>
        <img src="./TB1UfJnb3oQMeJjy0FpXXcTxpXa-160-44.png" alt="">
        <span class="sj">距结束</span>
        <span class="bian">
            <span class="hour">00</span>
            :
            <span class="min" id="min"></span>
            :
            <span class="miao" id="miao"></span>
        </span>
        <span id="btn">换一换</span>
    </nav>

    <hr>

    <div id="list"></div>
</div>

<script>

    var daoji = document.querySelector(".sj .bian .min");
    var daoj = document.querySelector(".sj .bian .miao");
    var min = 14;
    var miao = 60;
    setInterval(function () {
        miao--;
        if (miao < 10) {
            miao = "0" + miao
        }
        document.getElementById("miao").innerHTML = miao;
        if (miao == 00) {
            miao = 60;
            min--;
            if (min < 10) {
                min = "0" + min
            }
            if (min == 0) {
                min = 14;
            }
        }
        document.getElementById("min").innerHTML = min;
    }, 1000);

    //初始值
    var page = 1;

    //给换一换加点击事件
    document.querySelector("#btn").addEventListener('click',function () {
        //让page加1
        page++;
        if(page==4){
            page = 1;
        }
        //解决追加问题
        document.querySelector("#list").innerHTML = "";
        //执行ajax方法
        loadXMLDoc();
    })


    //获取 json 数据用的 ajax 方法
    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest){
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        }
        else{
            //IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                var json = xmlhttp.responseText;
                //把获取到的数据，转成数组对象格式的，方便js操作
                json = JSON.parse(json);
//                console.log(json.shop);
                for(let i = 0; i < json.shop.length; i++){
                    console.log(json.shop[i]);
                    //创建节点
                    var img = document.createElement('img');
                    img.src = json.shop[i].pic;
                    //创建h3节点
                    var h4 = document.createElement('h4');
                    h4.innerHTML = json.shop[i].title;
                    //创建p节点
                    var span1 = document.createElement('span');
                    span1.innerHTML = json.shop[i].price;

                    var span2 = document.createElement('span');
                    span2.innerHTML = json.shop[i].jiage;

                    var span3 = document.createElement('span');
                    span3.innerHTML = json.shop[i].percentage;

                    var span4 = document.createElement('span');
                    span4.innerHTML = json.shop[i].letter;

                    //创建div节点
                    var yi = document.createElement('div');
                    yi.classList.add('yi');

                    var er = document.createElement('div');
                    er.classList.add('right');

                    var progress = document.createElement('div');
                    progress.classList.add('progress');

                    var tiao = document.createElement('div');
                    tiao.style.width = json.shop[i].width;
                    tiao.classList.add('tiao');

                    var bai = document.createElement('div');
                    bai.classList.add('bai');


                    span1.classList.add('span1');
                    span2.classList.add('span2');
                    span3.classList.add('span3');
                    span4.classList.add('span4');



                    //向div标签追加3个子标签
                    yi.appendChild(img);
                    yi.appendChild(er);


                    er.appendChild(h4);
                    er.appendChild(progress);
                    er.appendChild(bai);
                    er.appendChild(span1);
                    er.appendChild(span2);

                    progress.appendChild(tiao);
                    bai.appendChild(span3);
                    bai.appendChild(span4);

                    console.log(yi);
                    console.log(er);
                    //把3个div标签追加到最大的div#list 标签
                    document.querySelector("#list").appendChild(yi);

                }
            }
        };
        xmlhttp.open("GET", page + ".json", true);
        xmlhttp.send();
    }

    //先执行一遍ajax方法
    loadXMLDoc();

</script>

</body>
</html>